import React, { useState, useEffect, useMemo } from 'react';
import AnimatedNumbers from "react-animated-numbers";
import { getDataBoardOp } from '../service';
import styles from './index.module.less';

const baseBoardData = [
  { path: 'oms#1', title: '待审核', field: 'noCheck'},
  { path: 'oms#2', title: '待付款', field: 'noPay'},
  { path: 'wms#1', title: '待拿货', field: 'noTakeUp', isWms: true},
  { path: 'wms#2', title: '待包装', field: 'noPackUp', isWms: true},
  { path: 'oms#4', title: '待发货', field: 'noShip'},
  { path: 'oms#6', title: '今日已发货', field: 'todayShipped'},
  { path: 'oms#3', title: '异常订单', field: 'error'},
  { path: 'trade/return', title: '物流回传失败', field: 'errorLogistics'},
]

const DataBoard = ({ updateKey }) => {
  const [boardObj, setObj] = useState({});

  const timeStamp = useMemo(()=>{
    return new Date().getTime();
  }, [updateKey])

  useEffect(()=>{
    getDataFunc();
  }, [updateKey])

  const getDataFunc = async () => {
    const { data, success } = await getDataBoardOp();
    if(success){
      setObj(data || {});
    }
  }

  const handleJump = (path) => {
    const arr = path.split('#');
    sessionStorage.setItem('jump_tab_key', arr[1]);
    if(arr[0] == 'oms'){
      window.open(`${window.location.origin}/#/trade/orderhandle`);
    } else if(arr[0] == 'wms'){
      window.open(`${window.location.origin}/#/storage/order`);
    } else {
      window.open(`${window.location.origin}/#/trade/return`);
    }
  }

  return (<>
    <div className={styles.dataBoardWrapper}>
        {
          baseBoardData.map(item=>{
            return (<div className={styles.dataBoardItem} key={item.field}>
              <span className="title">
                {item.title}
                <span>{item.isWms ? '(仓库)' : ''}</span>
              </span>
              <div className="orderNum" onClick={()=>handleJump(item.path)} key={timeStamp}>
                <AnimatedNumbers
                  animateToNumber={boardObj[item.field] || 0}
                  configs={(number, index) => {
                    return { mass: 1, tension: 230 * (index + 1), friction: 140 };
                  }}
                />
              </div>
            </div>)
          })
        }
    </div>
  </>)

}

export default React.memo(DataBoard, (prev, next)=>{
  return prev.updateKey == next.updateKey;
})